(function ($) {
  "use strict";
  /*
  * author GL
  * params = {
  *   self appendTo、prependTo的dom
  *   title 标题
  *   titleAlign: 标题排列
  *   content 内容
  *   btn 按钮文字 String
  *   price 底部显示价格
  *   btnEvent 按钮回调
  * }
  * */
  $.popup = function (option) {
    var defaults = {
      self: document.body,
      title: '标题',
      titleAlign: null,
      content: '',
      btn: null,
      price: null,
      type: null,
      line: true,
      btnEvent: function () {},
      insideClass: '',
      insideTplEvent: function(){}
    };
  
    var params = $.extend({},defaults,option);
    var tpl = '<div class="gzl-popup '+(params.insideClass?params.insideClass+' ':'')+(params.type?'gzl-footbar_popup':'')+'" '+(params.type?'style="position: absolute;"':'')+'>' +
      '<div class="mask"></div>' +
      '<div class="gzl-popup__box">' +
        '<div class="gzl-popup__hd'+(params.line?'':' afternone')+'">' +
          '<div class="gzl-popup__close"><svg class="icon"><use xlink:href="#icon-close"></use></svg></div>' +
          '<div class="gzl-popup__tit '+(params.titleAlign?params.titleAlign:'')+'"><strong>'+params.title+'</strong></div>' +
        '</div>' +
        '<div class="gzl-popup__bd"></div>' +
        (params.btn?'<div class="gzl-popup__ft"><div class="gzl-footbar">'+(params.price?'<div class="gzl-footbar__bd"><div class="gzl-footbar__count">已选'+params.count+'份</div><div class="gzl-footbar__price">￥<span>'+params.price+'</span></div></div>':'')+'<div class="gzl-flex__item"><div class="btn">'+params.btn+'</div></div></div></div>':'') +
      '</div>' +
      '</div>';
    var popup;
    if (params.type === 'footbar') {
      popup = $(tpl).prependTo(params.self);
    } else {
      popup = $(tpl).appendTo(params.self);
    }
    $.noScroll();
    $(".mask, .gzl-popup__box", popup).show().addClass("show");
    $(".mask, .gzl-popup__close", popup).on("click", function () {
      $.hidePopup()
    });
    $(".gzl-popup__bd", popup).append(params.content);
    $(".gzl-popup__ft .btn", popup).on("click", function () {
      params.btnEvent();
    })
    // 内部组件事件;
    params.insideTplEvent();
  };


  $.hidePopup = function () {
    $(".gzl-footbar").find((".gzl-footbar__price use")).attr("xlink:href","#icon-arrow-up");
    $(".gzl-popup").find(".mask, .gzl-popup__box").removeClass("show").transitionEnd(function () {
      $(".gzl-popup").remove();
      $(".gzl-footbar").removeClass("showpopup").find((".gzl-footbar__price use")).attr("xlink:href","#icon-arrow-up");
      $.hasScroll();
    })
  };


  $.infoPopup = function (option) {
    var defaults = {
      title: null,
      content: null
    }
    var params = $.extend({},defaults,option);
    var tpl = '<div class="gzl-popup_info">' +
      (params.title?'<div class="gzl-popup__hd"><strong>'+params.title+'</strong></div>':'') +
      '<div class="gzl-popup__bd">'+params.content+'</div>' +
      '<div class="gzl-popup__ft"><svg class="icon close-btn" aria-hidden="true"><use xlink:href="#icon-close-circle"></use></svg></div>' +
      '</div>';
    var infoPopup = $(tpl).appendTo(document.body);
    infoPopup.show().addClass("show");
    $(".close-btn", infoPopup).on("click", function () {
      $.hideInfoPopup();
    })
  };

  $.hideInfoPopup = function () {
    $(".gzl-popup_info").removeClass("show").transitionEnd(function () {
      $(".gzl-popup_info").remove();
      $.hasScroll();
    })
  };
  $.gridPopdown = function(option) {
    var defaults = {
      // self: document.body,
      list: [],
    };
    var params = $.extend({},defaults,option);
    var list = '';
    for (var i = 0; i < params.list.length; i++) {
      if (params.list.length > 0) {
        list += '<li class="gzl-grid__item">'+
          '<a href='+params.list[i].url+'>'+
            '<p>'+params.list[i].tagName+'</p>'
          '</a>'
        '</li>'
      }
    }
    var tpl = '<div class="gzl-popup '+(params.type?'gzl-footbar_popup':'')+'" '+(params.type?'style="position: absolute;"':'')+'>' +
      '<div class="mask"></div>' +
      '<div class="gzl-popup__box down">' +
        '<ul class="gzl-grid__box">'+list+'</ul>'+
      '</div>' +
      '</div>';
    var popup = $(tpl).appendTo("body");
    $.noScroll();
    $(".mask, .gzl-popup__box", popup).show().addClass("show");
    $(".mask", popup).on("click", function () {
      $.hidePopup()
    });
  };
  
  // 底部明细弹出
  $.fn.footPopup = function (option) {
    var self = $(this);
    option = $.extend({},option);
    self.on("click", function () {
      var footer = self.parents(".gzl-footer");
      var bar = footer.find(".gzl-footbar");
      var icon = self.find(".gzl-footbar__price use");
      option.self = footer;
      option.type = "footbar";
      if (!bar.hasClass("showpopup")){
        bar.addClass("showpopup");
        icon.attr("xlink:href","#icon-arrow-down");
        $.popup(option);
      }else{
        $.hidePopup();
      }
    })
  }

  $.simulatePagePopup = function(option) {
    //  参数 template,fuc,closeC,footerType,footerContent,
    // console.log(option);    
    var defaults = {
      self: document.body, // 插入位置
      wrapperClass: '', // 样式类
      content: '', // 插入内容 在本页面script标签被循环出来的;
      hasFooter : false, //  是否有底部
      footerContent: '', // 底部内容
      bindTplEvent: function(){ // 整个模板内容的操作事件;
        // todo Something
      }, 
    };

    var params = $.extend({},defaults,option);

    $.pushHistory(params.pushHistoryStr);
    // console.log(window.location.hash);
    var tpl = function(opt){
      return '<div class="gzl-page simulatePage '+(params.wrapperClass?params.wrapperClass:'')+'"><section class="gzl-section">'+ opt.content +'</section>'+(params.hasFooter&& params.footerContent ? params.footerContent: '')+'</div>'
    }
    var appendDom = $(tpl(option)).appendTo(document.body);
    // $("body").append(tpl(option)).addClass("show");
    appendDom.show().addClass("show");
    params.bindTplEvent();
  }
  
})($);